import React, {Component} from "react"


import './feilei.scss'
import {Link} from  'react-router-dom'
class Feilei extends Component{
    constructor(props){
        super(props),
            this.state={
                    girllist:[],
                    boylist:[]
            }
   }

   componentDidMount(){
        fetch('http://localhost:3000/api/jptj/feileilist').then((response)=>response.json()).then((data)=>{
           // console.log('分类分类',data)
            this.setState({
                girllist:data[0].girl,
                boylist:data[0].boy
            })
        }).catch((err)=>{
            console.log(err)
        })
   }


   render(){
        return(
            <div className='feilei'>
            <header>
                <Link to='/home' className='spans icon'>&#xe610;</Link>
                <div>分类</div>
                <Link to='/home' className='spans icon'>&#xe634;</Link>
            </header>




               <div className='content'>
                   <div className='girlkind'>
                       女生分类
                   </div>
                   <div className='girllist'>
                       <ul>
                           {this.state.girllist.map((item,index)=>{
                               var str=''
                               var obj=''
                               for (var key in item) {
                                   str=key
                                   obj=item[key]
                               }

                               //console.log('item',item,obj.list)
                               return(<Link to='xianyan' key={index} className='lis'>
                                   <div className='bigbg'>

                                   </div>
                                   <div className='list'>
                                       <span>{str}</span>
                                       <ul>
                                           {obj.list.map((itm,idx)=>{
                                               return(<li key={idx}>{itm} <span>|</span></li>)
                                           })}
                                       </ul>
                                   </div>
                               </Link>)
                           })}
                       </ul>
                   </div>
                   <div className='girlkind'>
                       男生分类
                   </div>


                   <div className='girllist'>
                       <ul>
                           {this.state.boylist.map((item,index)=>{
                               var str=''
                               var obj=''
                               for (var key in item) {
                                   str=key
                                   obj=item[key]
                               }

                              // console.log('item',item,obj.list)
                               return(<li key={index} className='lis'>
                                   <div className='bigbg'>
                                   </div>
                                   <div className='list'>
                                       <span>{str}</span>
                                       <ul>
                                           {obj.list.map((itm,idx)=>{
                                               return(<li key={idx}>{itm}  <span>|</span></li>)
                                           })}
                                       </ul>
                                   </div>
                               </li>)
                           })}
                       </ul>
                   </div>
               </div>

        </div>)
   }
}
export default Feilei;